<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>伪类 | 一只老鸟</title>
    <meta name="generator" content="VuePress 1.7.1">
    <link rel="icon" href="/img/rty-docs.ico">
    <script async="async" src="https://www.googletagmanager.com/gtag/js?id=UA-145250139-1"></script>
    <script>window.dataLayer = window.dataLayer || [];
      function gtag(){dataLayer.push(arguments);}
      gtag('js', new Date());
    
      gtag('config', 'UA-145250139-1');</script>
    <script>var _hmt = _hmt || [];
      (function() {
        var hm = document.createElement("script");
        hm.src = "https://hm.baidu.com/hm.js?96bef00c01d8ee7ee249abc380b9e5ab";
        var s = document.getElementsByTagName("script")[0]; 
        s.parentNode.insertBefore(hm, s);
      })();</script>
    <meta name="description" content="Welcome to my docs">
    <meta name="keywords" content="jkx,晋凯旋,jkxxmd,vue,js,html,css,英文歌曲,bruno">
    
    <link rel="preload" href="/assets/css/0.styles.eb327ba5.css" as="style"><link rel="preload" href="/assets/js/app.2b0e3d52.js" as="script"><link rel="preload" href="/assets/js/2.87232f21.js" as="script"><link rel="preload" href="/assets/js/85.50f34442.js" as="script"><link rel="prefetch" href="/assets/js/10.1e2b3af9.js"><link rel="prefetch" href="/assets/js/11.bfd5eea1.js"><link rel="prefetch" href="/assets/js/12.11b2a8d0.js"><link rel="prefetch" href="/assets/js/13.d230b1b6.js"><link rel="prefetch" href="/assets/js/14.8208356f.js"><link rel="prefetch" href="/assets/js/15.badc1e67.js"><link rel="prefetch" href="/assets/js/16.76e6aeba.js"><link rel="prefetch" href="/assets/js/17.ea4ddef2.js"><link rel="prefetch" href="/assets/js/18.e3d36bd1.js"><link rel="prefetch" href="/assets/js/19.aa1bac84.js"><link rel="prefetch" href="/assets/js/20.838765cd.js"><link rel="prefetch" href="/assets/js/21.14466225.js"><link rel="prefetch" href="/assets/js/22.38392bba.js"><link rel="prefetch" href="/assets/js/23.71895fbc.js"><link rel="prefetch" href="/assets/js/24.766c8a49.js"><link rel="prefetch" href="/assets/js/25.6b02ff9f.js"><link rel="prefetch" href="/assets/js/26.ef22337a.js"><link rel="prefetch" href="/assets/js/27.0334ed21.js"><link rel="prefetch" href="/assets/js/28.811fb438.js"><link rel="prefetch" href="/assets/js/29.f687b8ad.js"><link rel="prefetch" href="/assets/js/3.3fc78177.js"><link rel="prefetch" href="/assets/js/30.0eef1a68.js"><link rel="prefetch" href="/assets/js/31.44dad2fc.js"><link rel="prefetch" href="/assets/js/32.959ca33d.js"><link rel="prefetch" href="/assets/js/33.d27370cb.js"><link rel="prefetch" href="/assets/js/34.73319d5f.js"><link rel="prefetch" href="/assets/js/35.09513538.js"><link rel="prefetch" href="/assets/js/36.c77663c8.js"><link rel="prefetch" href="/assets/js/37.89852ede.js"><link rel="prefetch" href="/assets/js/38.a9026d97.js"><link rel="prefetch" href="/assets/js/39.2cb07eac.js"><link rel="prefetch" href="/assets/js/4.50419328.js"><link rel="prefetch" href="/assets/js/40.7694c8be.js"><link rel="prefetch" href="/assets/js/41.0b071795.js"><link rel="prefetch" href="/assets/js/42.731a77fd.js"><link rel="prefetch" href="/assets/js/43.e340c04a.js"><link rel="prefetch" href="/assets/js/44.32723933.js"><link rel="prefetch" href="/assets/js/45.fddbc294.js"><link rel="prefetch" href="/assets/js/46.7227ca9a.js"><link rel="prefetch" href="/assets/js/47.e445b894.js"><link rel="prefetch" href="/assets/js/48.22f08eaa.js"><link rel="prefetch" href="/assets/js/49.1ee7be95.js"><link rel="prefetch" href="/assets/js/5.f4c7dd9b.js"><link rel="prefetch" href="/assets/js/50.620525ff.js"><link rel="prefetch" href="/assets/js/51.23ef9c37.js"><link rel="prefetch" href="/assets/js/52.ab599220.js"><link rel="prefetch" href="/assets/js/53.6f0a5a12.js"><link rel="prefetch" href="/assets/js/54.0af9ce80.js"><link rel="prefetch" href="/assets/js/55.9a619ce4.js"><link rel="prefetch" href="/assets/js/56.d3eb58e2.js"><link rel="prefetch" href="/assets/js/57.cec694aa.js"><link rel="prefetch" href="/assets/js/58.215ff512.js"><link rel="prefetch" href="/assets/js/59.67b4a2d9.js"><link rel="prefetch" href="/assets/js/6.35564b30.js"><link rel="prefetch" href="/assets/js/60.10fa328d.js"><link rel="prefetch" href="/assets/js/61.eb384a7b.js"><link rel="prefetch" href="/assets/js/62.21995735.js"><link rel="prefetch" href="/assets/js/63.d3376937.js"><link rel="prefetch" href="/assets/js/64.9dc17e46.js"><link rel="prefetch" href="/assets/js/65.faaf4be5.js"><link rel="prefetch" href="/assets/js/66.82d4fd2e.js"><link rel="prefetch" href="/assets/js/67.766e8bbb.js"><link rel="prefetch" href="/assets/js/68.e00a5e5f.js"><link rel="prefetch" href="/assets/js/69.0f9198d3.js"><link rel="prefetch" href="/assets/js/7.826495ef.js"><link rel="prefetch" href="/assets/js/70.05ef2cdd.js"><link rel="prefetch" href="/assets/js/71.0da0e95b.js"><link rel="prefetch" href="/assets/js/72.fd1cda42.js"><link rel="prefetch" href="/assets/js/73.907aa3c6.js"><link rel="prefetch" href="/assets/js/74.dec02a91.js"><link rel="prefetch" href="/assets/js/75.8610ce53.js"><link rel="prefetch" href="/assets/js/76.db9000c6.js"><link rel="prefetch" href="/assets/js/77.fa0311a2.js"><link rel="prefetch" href="/assets/js/78.33ae2bd0.js"><link rel="prefetch" href="/assets/js/79.879fa638.js"><link rel="prefetch" href="/assets/js/8.7a30ba0c.js"><link rel="prefetch" href="/assets/js/80.898b981f.js"><link rel="prefetch" href="/assets/js/81.b606e1f8.js"><link rel="prefetch" href="/assets/js/82.5006eb1e.js"><link rel="prefetch" href="/assets/js/83.604f41d2.js"><link rel="prefetch" href="/assets/js/84.2e649063.js"><link rel="prefetch" href="/assets/js/86.aee7b865.js"><link rel="prefetch" href="/assets/js/87.9b812977.js"><link rel="prefetch" href="/assets/js/88.52e08a6c.js"><link rel="prefetch" href="/assets/js/9.7b6af510.js">
    <link rel="stylesheet" href="/assets/css/0.styles.eb327ba5.css">
  </head>
  <body>
    <div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/" class="home-link router-link-active"><!----> <span class="site-name">一只老鸟</span></a> <div class="links"><div class="search-box"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----></div> <nav class="nav-links can-hide"><div class="nav-item"><a href="/" class="nav-link">
  主页
</a></div><div class="nav-item"><a href="/components/introduction.html" class="nav-link">
  VUE
</a></div><div class="nav-item"><a href="/english/introduction.html" class="nav-link">
  Javascript
</a></div><div class="nav-item"><a href="/music/introduction.html" class="nav-link">
  Html5
</a></div><div class="nav-item"><a href="/oral/introduction.html" aria-current="page" class="nav-link router-link-exact-active router-link-active">
  CSS
</a></div> <a href="https://github.com/jgsrty/jgsrty.github.docs" target="_blank" rel="noopener noreferrer" class="repo-link">
    GitHub
    <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></nav></div></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/" class="nav-link">
  主页
</a></div><div class="nav-item"><a href="/components/introduction.html" class="nav-link">
  VUE
</a></div><div class="nav-item"><a href="/english/introduction.html" class="nav-link">
  Javascript
</a></div><div class="nav-item"><a href="/music/introduction.html" class="nav-link">
  Html5
</a></div><div class="nav-item"><a href="/oral/introduction.html" aria-current="page" class="nav-link router-link-exact-active router-link-active">
  CSS
</a></div> <a href="https://github.com/jgsrty/jgsrty.github.docs" target="_blank" rel="noopener noreferrer" class="repo-link">
    GitHub
    <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></nav>  <ul class="sidebar-links"><li><a href="/oral/introduction.html" aria-current="page" class="active sidebar-link">伪类</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/oral/introduction.html#伪类" class="sidebar-link">伪类</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/oral/introduction.html#阴影问题" class="sidebar-link">阴影问题</a></li><li class="sidebar-sub-header"><a href="/oral/introduction.html#各个浏览器兼容前缀" class="sidebar-link">各个浏览器兼容前缀</a></li><li class="sidebar-sub-header"><a href="/oral/introduction.html#圆角" class="sidebar-link">圆角</a></li></ul></li><li class="sidebar-sub-header"><a href="/oral/introduction.html#_2d-转换-transform" class="sidebar-link">2D 转换 transform</a></li><li class="sidebar-sub-header"><a href="/oral/introduction.html#_3d转换-transform" class="sidebar-link">3d转换 transform</a></li><li class="sidebar-sub-header"><a href="/oral/introduction.html#动漫组成部分" class="sidebar-link">动漫组成部分</a></li></ul></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>英语口语短文</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/oral/essay/Describe a type of transport you like the most.html" class="sidebar-link">ES6</a></li><li><a href="/oral/essay/What do you do to keep yourself healthy.html" class="sidebar-link">What do you do to keep yourself healthy</a></li></ul></section></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h2 id="伪类"><a href="#伪类" class="header-anchor">#</a> 伪类</h2> <p>: 伪类 一个冒号
:: 伪元素 两个冒号
overflow:hidden; 内容超出 隐藏 有范围
overflow:visible; 内容超出 可见的 有范围
visibility: hidden; 所有的都隐藏 没有范围
visibility: visible; 所有的都显示 没有范围
省略号问题
text-overflow:ellipsis 文字超出省略号显示 （要写兼容 否则
没有效果 ）
display: -webkit-box;
-webkit-line-clamp: 1(有几行写几 );
-webkit-box-orient:vertical;</p> <ol><li>overflow:hidden; //超出的文本隐藏</li> <li>text-overflow:ellipsis; //溢出用省略号显示</li> <li>white-space:nowrap; //溢出不换
-webkit-谷歌浏览器兼容前缀
wold-break:break-all; 强制换行</li></ol> <h3 id="阴影问题"><a href="#阴影问题" class="header-anchor">#</a> 阴影问题</h3> <p>text-shadow:<em>px <em>px <em>px #</em></em>
文字阴影： 第一个水平方向 第二个垂直方向 第三个阴影大小
颜色。
box-shadow:<em>px <em>px <em>px <em>px #</em></em>
盒子阴影 水平方向 垂直方向 模糊程度 阴影范围 颜色。
border-image:url</em></em></em>___（27）report___ 必须设置边框宽度
27就是裁剪位
置 比方图片100宽 从左到右27裁剪
边框背景用图片显示
背景线性渐变
background: linear-gradient(red,blue); 渐变 从上到下
（默认的）
background: linear-gradient(to right,red,blue) to
right(从左到右)
background: linear-gradient(to right,red 50%,blue 50%) 红
色 蓝色 各占50%
background: linear-gradient( red,ongre,blue) 三个色
linear 直线 radial 径向 border-radius:边框
背景径向渐变
background: radial-gradient(orange,red) 中间是橘色 外面是
红色
background-size是css3的新属性，用于设置背景图片的大小，有两个可选
值，第一个值用于指定背景图的width,第2个值用于指定背景图的height,如果
只指定一个值，那么另一个值默认为auto。</p> <ol><li>background-size:cover; 等比扩展图片来填满元素</li> <li>background-size:contain; 等比缩小图片来适应元素的尺寸</li></ol> <h3 id="各个浏览器兼容前缀"><a href="#各个浏览器兼容前缀" class="header-anchor">#</a> 各个浏览器兼容前缀</h3> <p>-webkit- 谷歌/safari(苹果自带)浏览器
-moz- 火狐
-o- opera 欧朋
-ms- ie浏览器前缀ie9以上</p> <h3 id="圆角"><a href="#圆角" class="header-anchor">#</a> 圆角</h3> <p>border-radius:_px
border: _px solid transparent transparent（颜色透明 色
值上透明）
opacity:0-1 透明度
过度 transition
transition: width/height _s(几秒) 发生改
变时才会有过度产生
transition-delay:_s 延迟过度 默认是 0
后面写过度的时间 all所有的:hover都变 也可以单独加一个属性
transition-property (属性)
属性规定应用过渡效果的 CSS 属性的名称。（当指定的 CSS 属性改变时，过渡效果
将开始）
transition-duration 制定几秒
规定完成过渡效果需要花费的时间（以秒或毫秒计）。
transition-funciton(函数) 制定效果的转速曲线 默认是 ease
linear 规定以相同速度开始至结束的过渡效果（等于 cubic-bezier(0,0,1,1)）。
ease 规定慢速开始，然后变快，然后慢速结束的过渡效果（cubic-bezier(0.25,0.1,0.25,1)）。
ease-in 规定以慢速开始的过渡效果（等于 cubic-bezier(0.42,0,1,1)）。
ease-out 规定以慢速结束的过渡效果（等于 cubic-bezier(0,0,0.58,1)）。
ease-in-out 规定以慢速开始和结束的过渡效果（等于 cubic-bezier(0.42,0,0.58,1)）。
cubic-bezier(n,n,n,n) 在 cubic-bezier 函数中定义自己的值。可能的值是 0 至 1 之间的数值。</p> <h2 id="_2d-转换-transform"><a href="#_2d-转换-transform" class="header-anchor">#</a> 2D 转换 transform</h2> <p>1、位移 translate
transform:translate(400px,200px) 不写X Y 括号里面就是（XY）
正数右上 负数左下
transform:translateX(400px)朝X轴移动400
2、旋转 rotate deg(度数)
transform:rotate
transform: rotatey(78deg);Y轴旋转
transform: rotateX(78deg);X轴旋转
transform: rotate（78deg）;整体旋转
3、缩放 scale（死给哦） 数值是倍数无单位
transform: scale(2,1) x轴放大2倍 Y轴放大一倍
transform: scaleX(2)
transform: scaleY(2)
4、倾斜 skew（死可恶） deg度数
transform: skew(78deg,78deg)
transform: skewX(78deg)
transform: skewY(78deg)
5、矩阵 matrix(吗垂克斯)
实现上面四个合一起的效果
旋转基点 transform-origin:__ ；
transform-origin: left;
transform-origin: right;
transform-origin: top;
transform-origin: bottom;</p> <h2 id="_3d转换-transform"><a href="#_3d转换-transform" class="header-anchor">#</a> 3d转换 transform</h2> <p>如果想实现3D效果
1、透视关系 perspective (珀斯百科体悟)
perspective 透视 必须设置在父级上面
perspective-origin:__; 透视基点
2、让子元素在3D空间显示
transform-style: preserve-3d
3d转换 transform 必须设置在父级上面
transform-origin 旋转基点
1、位移 translate
transform: translate3d(__px,__px,<strong>px)
transform: translateX(<strong>px); X轴位移
transform: translateY(<strong>px); Y轴位移
transform: translateZ(<strong>px); Z轴位移
2、旋转 rotate
transform: rotate3d(</strong>,</strong>,</strong>,<strong>deg) <strong>比例数字
transform: rotateX(<strong>deg);
transform: rotateY(<strong>deg);
transform: rotateZ(<strong>deg);
3、缩放 scale
transform: scale3d(</strong>,</strong>,</strong>,);
transform: scaleX(</strong>,);
transform: scaleY(</strong>,);
transform: scaleZ(</strong>,);
4、倾斜 skew 没有Z轴上倾斜
transform: skew(__deg);
transform: skewX(__deg);
transform: skewY(__deg);
:hover :active :visited :before :after
一个:是伪类 两个::是伪元素
如果要成为伪元素必须加 content:&quot; &quot; 才有效，定位会让样式
全部显示。
伪类和伪元素的区别
伪类比伪元素出现的要早，伪类兼容IE8以下，伪元素仅能兼容IE9及
以上版本，谷歌，火狐。 但是IE8及以下浏览器不兼容。如果使用
时，需要兼容IE8以下版本就使用伪类。
圆角 border-radius 先上下再左右
盒子阴影 box-shadow
文字阴影 text-shadow
线向渐变 backgroud:linear-gradient
径向渐变 background:radial-gradient
过度 transition
2d转换 transform
转换基点 transform-origin
center
left
top
right
1.位移 translate
2.旋转 rotate
rotate(30deg,30deg)
rotatey(30deg)
rotatex(_deg)
3.缩放 scale
scale(1,1)
scalex(1)
scaley(2)
transform:scale(1,1,1)
4.倾斜 skew
skew(45deg,45deg)
5矩阵 matrix矩阵是同时实现上面加一起的效果使用
3d转换 transform3d
translate3d(_px,_px_px)
rotate3d(1,1,1,360deg) √
scale3d(1,2,3)
skew(45deg,45deg)
透视perspective
能体现3d效果 必须的2个条件
透视基点 perspective-origin:0px 0px;
让子元素在3d空间显示 transform-style: preserve-3d
动画 animation
关键帧 @keyframes __(起个名字){
from{}
to{}
}
1、动画播放方向 animation-direction
normal 正序播放
reverse 倒叙播放
alternate 交替播放
alternate-reverse 反向交替
2、动画播放次数 linear 播放一次
3、infinite 循环播放
4、animation-fill-mode; 动画填充方式
backwards 返回第一帧
forwards 保持最后一帧
5、animation-delay: __s 动画延迟播放
6、animation-play-state 动画播放状态
running 播放
paused 暂停
7、animation-timing-function 动画时间函数
ease 默认选
项 慢快慢
ease-in 慢 快
ease-out 快 慢
ease-in-out 慢快慢
linear 匀速
cubic-bezier (数字，数字，
数字，数字)
1、动画与过度的区别？
什么是动画？
动画 animation 关键帧+时长</p> <h2 id="动漫组成部分"><a href="#动漫组成部分" class="header-anchor">#</a> 动漫组成部分</h2> <p>———关键帧 @keyframes
@keyframes name(设置名字){
from（从什么状态开始）{ }
to（以什么状态结束）{ }
}
———从一个状态到另一个状态
@keyframes name(设置名字){
0%{ }
20%{ }
30%{ }
50%{ }
100%{ }
}
中间可以有多个状态
2、动画时长 动画时间 单位是S
3、动画迭代次数
animation: name(关键帧名字) __S（秒） infinite（或
写几次）
可以直接写此数 （默认linear 播放一次 ） 2，3，4，
5，6.。。。。。
循环播放 infinite
4、动画方向 animation-direction
-normal 正序播放
-reverse 倒序播放
-alternate 交替播放
-alternate-reverse 反向交替
5、动画延迟 animation-delay
animation-delay: 2s; 单位s
6、动画填充模式 animation-fill-mode:
-backwards 返回第一帧
-forwards 保持最后一帧
7、动画播放状态 animation-play-state
-animation-play-state:running 播放
-animation-play -state:paused 暂停
8、动画时间函数 animation-timing-function
-ease; 开始慢速 然后快速 最后慢速 《默认选项》 比最
下面那个 慢速时间短
-ease-in 进去时候慢速 后面快速
-ease-out 出去时慢速 前面快速
-ease-in-out 开始和结束时候慢速 中间匀速
-linear 匀速
-cubic-bezier(数字，数字，数字，数字)
keyframes
animation-direction
alternate
alternate-reverse
animation-delay
transform
rotate
translate
scale
skew
animation-fill-mode
forwards
infinite
perspective
transform-style
transform-origin
perspective-origin
preserve-3d
transition
transparent
transition
linear-gradient
radial-gradient
opacity
progress
normal</p></div> <footer class="page-edit"><div class="edit-link"><a href="https://github.com/jgsrty/jgsrty.github.docs/edit/master/docs/oral/introduction.md" target="_blank" rel="noopener noreferrer">Edit this page</a> <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></div> <div class="last-updated"><span class="prefix">Last Updated:</span> <span class="time">12/23/2020, 4:59:13 PM</span></div></footer> <div class="page-nav"><p class="inner"><!----> <span class="next"><a href="/oral/essay/Describe a type of transport you like the most.html">
        ES6
      </a>
      →
    </span></p></div> </main></div><div class="global-ui"></div></div>
    <script src="/assets/js/app.2b0e3d52.js" defer></script><script src="/assets/js/2.87232f21.js" defer></script><script src="/assets/js/85.50f34442.js" defer></script>
  </body>
</html>
